<template>
  <div class="page-number-box v-align-c">
    <el-pagination background layout="prev, pager, next"
    :total="total" :page-size="pageSize" @current-change="handleCurrentChange" :current-page="currentPage"/>
    <div class="v-align-c mar-l-15">
      <div class="v-align-c">
        <span class="mar-r-10">到</span>
        <el-input class="width-50 height-38" v-model="pageNum"/>
        <span class="mar-l-11">页</span>
      </div>
      <div class="sure-btn flex flex-center mar-l-15 cursor-p">
        <span @click="pageJump">确定</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  props: {
    total: Number,
    pageSize: Number
  },
  setup(props, content) {
    const pageNum = ref('')
    const currentPage = ref(1)

    const handleCurrentChange = (val:number) => {
      currentPage.value = val
      content.emit('handleSearch',val)
    }

    const pageJump = () => {
      const pageTotal = Math.ceil(props.total/props.pageSize)
      let num = 0
      if (Number(pageNum.value) > pageTotal) {
        num = pageTotal
        pageNum.value = pageTotal + ''
      } else {
        num = Number(pageNum.value)
      }
      currentPage.value = num
      content.emit('handleSearch',num)
    }

    return {
      pageNum,
      pageJump,
      handleCurrentChange,
      currentPage
    }
  }
})
</script>

<style lang="scss" scoped>
.page-number-box {
  ::v-deep(.active) {
    background-color: #182245 !important
  }
  ::v-deep(.el-input__inner) {
    height: 32px !important;
  }
  .sure-btn {
    width: 50px;
    height: 32px;
    background: #182245;
    border-radius: 4px;
    color: #fff;
  }
}
</style>
